<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/axios.min.js" ></script>
    <!--导入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--导入组件-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <h2>{{ message }}</h2>
    <!--搜索表单-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="日期" >

                <span class="demonstration">年</span>
                <el-date-picker
                        v-model="value6"
                        type="year"
                        placeholder="选择年"
                        :picker-options="pickerOptions1"
                        @change="dateChange"
                        format="yyyy" value-format="yyyy">
                </el-date-picker>

            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="plus" @click="addClick">新增</el-button>
            </el-form-item>
        </el-form>
    </el-row>

    <!--显示表格-->
    <el-row>
        <el-table
                :data="tableData"
                v-loading.body="loading"
                border
                @selection-change="selectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="测评项"
                    width="200">
            </el-table-column>
            <el-table-column
                    v-if="show"
                    prop="id"
                    label="工号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="yearname"
                    label="年份"
                    width="120">
            </el-table-column>

            <el-table-column
                    label="操作">

                <template scope="scope">
                    <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑</el-button>
                    <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
      <!--  <el-col :span="6" >
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
        </el-col>-->
        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>

<!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">

            <el-form-item label="创建年份" prop="yearname">

                <!--<span class="demonstration"></span>-->
                <el-date-picker
                        v-model="editForm.yearname"
                        type="year"
                        placeholder="选择年"
                        :picker-options="pickerOptions1"
                        @change="dateChange"
                        format="yyyy" value-format="yyyy">
                </el-date-picker>
            </el-form-item>
                <el-form-item label="项目名称" prop="name">
                <el-input v-model="editForm.name" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="序号" prop="id" v-if="show">
                <el-input v-model="editForm.id" auto-complete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script >
    var  app =new Vue({
        el:"#app",
        data:{
            message: '测评体系',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            options:[{
                options:""

            }],value:'',
            //编辑年份
            yearname: '',
            //搜索年份
            value6: '',
            //列表数据
            tableData: [],
            //显示加载中样式
            loading:false,
            //搜索表单
            searchForm: {
                year: '',
                tname:''
                //deptNo: ''223
            },
            //多选值
            multipleSelection: [],
            //当前页
            currentPage:1,
            //分页大小
            pageSize:10,
            //总记录数
            total:800,
            //删除的弹出框
            deleteVisible:false,
            //编辑界面是否显示
            editFormVisible: false,
            editLoading: false,
            goUrl:'',
            editFormRules: {
                ename: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            //编辑界面数据
            editForm: {
                id:"",
                tname: "",
                yid:"",
                yearname:""


            },
        },
        //初始加载
        created:function(){

            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
           // alert("111");
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.currentPage*this.pageSize+1;
          axios.post('/tixi/getYear').then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                //self.total=response.data.total;
                self.options = response.data.options;
                //self.multipleSelection=response.data.data;
            })
            axios.post('/tixi/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                self.total=response.data.total;
                self.tableData = response.data.data;
                //self.options = response.data.options;
                // self.multipleSelection=response.data.data;
            })
            /*      axios.post('/yuangong/getRole').then(function(response){
                      // console.log(response.data);
                      //alert(response.data.total);
                     // self.total=response.data.total;
                      self.options = response.data.options;
                      // self.multipleSelection=response.data.data;
                  })*/
        },
        methods:{
            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                var searchForm={'start':start,'pageSize':this.pageSize,'year':_self.value6 };
                 //alert(JSON.stringify(searchForm));
                axios.post('/tixi/list',searchForm).then(function(response){
                    _self.total=response.data.total;
                    _self.tableData = response.data.data;
                    //self.options = response.data.options;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },
            //表格查询事件
            searchClick:function() {
                var self=this;
                self.loadingData();
            }
            ,//分页大小修改事件
            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //表格删除事件
            deleteClick:function(row) {

                var _self = this;
                //alert(_self);
                this.$confirm('确认当前操作吗？', '提示', {

                    type: 'warning'
                }).then(function(){
                    var  url="/tixi/del?id="+row.id;// "emp/del/1"
                    //  var  url="/yuangong/del/"+row.id;// "emp/del/1"
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data == 1){//接受参数
                            _self.$message({
                                message: row.id + '删除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                        else{//接受参数
                            _self.$message({
                                message: '有子项目 不能删除',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //表格勾选事件
            selectionChange:function(val) {
                for(var i=0;i<val.length;i++) {
                    var row = val[i];
                }
                this.multipleSelection = val;
                console.info(val);
            },
            //删除所选，批量删除
            removeSelection:function() {
                var _self = this;
                var multipleSelection = this.multipleSelection;
                if(multipleSelection.length < 1) {
                    _self.$message({
                        message: '请至少选中一条记录',
                        type: 'error'
                    });
                    return;
                }
                var ids = "";
                for(var i=0;i<multipleSelection.length;i++) {
                    var row = multipleSelection[i];
                    ids += row.id + ","
                }
                this.$confirm('确认删除' + ids +'吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/yuangong/batchDel?ids="+ids;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        var temp="";
                        if(response.data>0){
                            temp="删除成功";
                        }else {
                            temp="删除失败";
                        }
                        _self.$message({
                            message: ids + temp,
                            type: 'success'
                        });
                        _self.loadingData();//重新加载数据
                    });

                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },

            //表格编辑事件
            editClick:function(row) {
                this.goUrl="/tixi/update";
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            addClick:function() {
                //alert(111);
                this.goUrl="/tixi/add";
                var _self = this;
                this.editForm={id:0,name:"",yearname:""}
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                _self.loadingData();//重新加载数据
            },
            //保存点击事件
            editSubmit:function(){
                var _self = this;
                _self.loading = true;
                var formData =this.editForm;
                //alert(formData);
                var goUrl=this.goUrl;
                //alert(goUrl);
                //alert(JSON.stringify(formData));
                // axios.post("/emp/add",{"ename":this.editForm.ename,"job":this.editForm.job}).then(function(response){
                axios.post(goUrl,formData).then(function(response){
                    // console.log(response.data);
                    // alert(222);
                    // self.total=response.data.total;
                    if(response.data>0){
                        _self.editFormVisible = false;// 让弹出层隐藏
                        _self.loadingData();//重新加载数据
                    }
                })
                console.info(this.editForm);
            },qingkong:function(){

                this.editForm.name=null;
                this.editForm.yearname=null;

            }
        }
    })

</script>
</html>